<template>
  <h1 style="text-align: center">月销售统计</h1>

  <div class="search">
    <span style="color: #545c64">销售年份：</span>
    <el-select @change="countMonth" v-model="year" class="m-2 ">
      <el-option
          v-for="year in years"
          :key="year"
          :label="year"
          :value="year"
      />
    </el-select>
  </div>
  <div ref="type" style="width: 100%;height: 500px;display: inline-block"></div>


</template>

<script>

import * as echarts from "echarts";
import axios from "axios";

export default {
  data() {
    return {
      year: "",
      years: [],
      data: [
        {type: 'bar', seriesLayoutBy: 'row'},
        {type: 'bar', seriesLayoutBy: 'row'},
        {type: 'bar', seriesLayoutBy: 'row'}
      ],
      types: [{type: 'bar', seriesLayoutBy: 'row'},
        {type: 'bar', seriesLayoutBy: 'row'},
      ],
      goods:[],
    }
  },
  methods: {
    setYears() {
      axios.get("/project/client/findYer").then(resp => {
        this.years = resp.data;
        this.year = this.years[0];
      })
    },
    countMonth() {
      axios.get("/project/client/findByYear", {
        params: {
          year: "2022",
        }
      }).then(resp => {
        console.log(resp.data);
        axios.get("/project/goods/findTypes").then(resp => {
          let data = resp.data;

          for (let i = 0; i < data.length; i++) {

            this.types.push({type: 'bar', seriesLayoutBy: 'row'});
          }
        })
        console.log(this.types);
        this.data = resp.data;
        console.log(this.data);
        let myChart = echarts.init(this.$refs.type);
        let option = {
          legend: {},
          tooltip: {},
          dataset: {
            source: this.data,
          },
          xAxis: [
            {type: 'category', gridIndex: 0},
            {type: 'category', gridIndex: 1}
          ],
          yAxis: [{gridIndex: 0}, {gridIndex: 1}],
          grid: [{bottom: '55%'}, {top: '55%'}],
          series: this.types,
        };
        myChart.setOption(option);
      })

    },
  },
  created() {

  },
  mounted() {
    this.setYears();
    this.countMonth();
  }
}
</script>

<style scoped>
.search {
  width: 80%;
  margin: 10px;
}

.search * {
  margin-right: 20px;
}
</style>